<template>
  <div id="index-wrap">
    <LxyHeader></LxyHeader>
    <div class="main">
      <div class="left">
        <!-- 供应链金融服务 -->
        <SupplyChainFinanceService></SupplyChainFinanceService>
        <!-- 直采商城 -->
        <ZhiCaiMall></ZhiCaiMall>
        <!-- 大宗贸易商城 -->
        <TradingMall></TradingMall>
      </div>
      <div class="mid">
        <!-- 地图 -->
        <Map></Map>
        <!-- 平台交易数据动态 -->
        <TradeTrend></TradeTrend>
      </div>
      <div class="right">
        <!-- 基础平台 -->
        <BasicPlatform></BasicPlatform>
        <!-- 劳务撮合 -->
        <LaborMatching></LaborMatching>
        <!-- 工人培训 -->
        <WorkerTraining></WorkerTraining>
      </div>
    </div>
  </div>
</template>

<script setup>
import LxyHeader from "./components/lxyHeader.vue";
import SupplyChainFinanceService from "./components/supplyChainFinanceService.vue";
import ZhiCaiMall from "./components/zhiCaiMall";
import TradingMall from "./components/tradingMall";
import Map from "./components/map.vue";
import TradeTrend from "./components/tradeTrend";
import BasicPlatform from "./components/basicPlatform";
import LaborMatching from "./components/laborMatching";
import WorkerTraining from "./components/workerTraining";
</script>

<style scoped lang="scss">
#index-wrap {
  width: vw(1920);
  height: vh(1080);
  background-color: #000;
  color: #fff;
  .main {
    display: flex;
    justify-content: space-between;
    padding: 0 vw(20);
    padding-top: vh(20);
    .left {
      width: vw(520);
    }
    .mid {
      width: vw(800);
    }
    .right {
      width: vw(520);
    }
  }
}
</style>